<template>
  <div id="app">
        <navSimple :message="navMessage"></navSimple>
        <div class="changeTitle">
        <router-link to="/register">
            <div class="left" @click="changeRouter('register')" :class="{selected:choosen}">
              用户注册
            </div>
         </router-link>
          <router-link to="/reset">
            <div class="right" @click="changeRouter('reset')" :class="{'selected':!choosen}">
              忘记密码
            </div>
        </router-link>
        </div>
        <router-view>
        </router-view>
  </div>
</template>

<script>
import 'common/css/reset.css';

import navSimple from"components/units/navSimple.vue";


  var _mm=require('common/util/mm.js');

  export default {
    name: 'app',
    methods:{
      changeRouter(msg){
          if (msg === "register") {
            this.todo= msg;
          }
          if (msg === "reset") {
            this.todo= msg;
          }
      }
    },
    components: {
        navSimple
    },
    created(){
            if (this.todo=== "register") {
              this.$router.push("/register")
            }
            if(this.todo === "reset"){
                 this.$router.push("/reset")
            }

    },
    computed:{
      choosen(){
        if (this.todo ==="register") {
          return true
        }else{
          return false

        }
      },
      navMessage(){
        if (this.todo ==="register") {
          return "注册"
        }else{
          return "忘记密码"

        }
      }
    },

    data(){
      return{
          todo:_mm.getUrlParam("toDo") ||"register",
          
      }
    }
  }
</script>

<style lang="stylus">
.left, .right{
  color:#bfbfbf;
  display:inline-block;
}
.left{
  width:45%;
}
.right{
  width:45%;
}
.changeTitle{
  height:41i8px
  line-height:40px
  font-size:24px;
  text-align:center;
  border-bottom:.5px solid #bfbfbf
  margin-bottom:10px;
}
.changeTitle .selected{
  color:rgb(222,64,43);
  border-bottom:2px solid rgb(222,64,43)
  
}
 
</style>
